<template>
  <el-container v-loading="loading">
    <div class="container" style="height: 100vh;">
      <div id="app">
        <!-- 手机模拟器 -->
        <div class="app-preview">
          <div class="app-head"></div>
          <div class="app-content">
            <div class="app-content-title"
                 v-bind:style="{background:pageConfig.titleConfig.navigationBgColor,color:pageConfig.titleConfig.fontColor}"
                 v-bind:class="{ 'active': appEditorConfig.currentEditor == 'head'}"
                 @click="chooseAppView({viewName: 'head'})">
              {{pageConfig.titleConfig.pageTitle}}
            </div>

            <div class="app-content-main" v-bind:class="{ 'active': appEditorConfig.currentEditor == 'main'}"
                 @click="chooseAppView({viewName: 'main'})">
              <!--templet1-->
              <div class="templet1" v-if="pageConfig.mainConfig.templetType == 1">
                <div class="carousel slide" data-ride="carousel">
                  <div class="carousel-inner">
                    <div class="carousel-item" v-bind:class="{'active': index == '0'}"
                         v-for="(bannerItem,index) in pageConfig.mainConfig.bannerGroups">
                      <img class="carousel-item-img" v-bind:src="bannerItem.imageUrl">
                    </div>
                  </div>
                </div>

                <div class="seach-input">
                  <img class="seach-icon"
                       src="https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/index/search.png">
                  <input type="text" class="text-input"
                         v-bind:placeholder="pageConfig.mainConfig.searchConfig.searchHintText">
                  <button class="seach-btn"
                          v-bind:style="{background:pageConfig.mainConfig.searchConfig.searchBtnBgColor,color:pageConfig.mainConfig.searchConfig.searchBtnFontColor}">
                    搜索
                  </button>
                </div>

                <div class="sys-notify">
                  <img class="notify-icon" v-bind:src="pageConfig.mainConfig.systemNotifyIconUrl">
                  <div class="notify-text">系统通知消息</div>
                </div>

                <div class="switch-panel">
                  <div class="switch-panel-title" v-bind:style="{color:pageConfig.mainConfig.ingressGroups.fontColor}">
                    <div class="panel-title-item" v-bind:class="{'active': index == 0}"
                         v-for="(ingressItem,index) in pageConfig.mainConfig.ingressGroups.ingress">
                      {{ingressItem.name}}
                    </div>
                  </div>
                  <div class="switch-panel-content">
                    <div class="panel-content-item">
                      <div
                        v-bind:class="{'ingress-item-col-3' :pageConfig.mainConfig.ingressGroups.columnSize == 0 , 'ingress-item-col-4': pageConfig.mainConfig.ingressGroups.columnSize == 1}"
                        v-for="(ingressChildrenItem,index) in pageConfig.mainConfig.ingressGroups.ingress[0].children"
                        v-bind:style="{borderColor:pageConfig.mainConfig.ingressGroups.borderColor}">
                        <img class="ingress-icon" v-bind:src="ingressChildrenItem.iconUrl">
                        <div class="ingress-text">{{ingressChildrenItem.name}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!--templet2-->
              <div class="templet2" v-if="pageConfig.mainConfig.templetType == 2">
                <div class="head" v-bind:style="{backgroundImage:'url('+pageConfig.mainConfig.headBgImage+')'}"
                     style="background-repeat:no-repeat;background-size: 100% 100%;">
                  <div class="location-hint">
                    ∨ 西安市
                  </div>

                  <div class="nearby-hint-text"
                       v-bind:style="{background:pageConfig.mainConfig.nearbyConfig.bgColor,color:pageConfig.mainConfig.nearbyConfig.fontColor}">
                    <img class="carousel-item-img" v-bind:src="pageConfig.mainConfig.nearbyConfig.iconUrl">
                    {{pageConfig.mainConfig.nearbyConfig.hintText}}
                  </div>

                  <div class="ingress-groups-wrap"
                       v-bind:style="{backgroundImage:'url('+pageConfig.mainConfig.ingressGroups.bgImage+')',color:pageConfig.mainConfig.ingressGroups.fontColor}"
                       style="background-repeat:no-repeat;background-size: 100% 100%;">
                    <div class="ingress-groups">
                      <div class="ingress-item"
                           v-for="(ingressItem,index) in pageConfig.mainConfig.ingressGroups.ingress">
                        <img class="ingress-icon" v-bind:src="ingressItem.iconUrl">
                        <p class="ingress-name">
                          {{ingressItem.name}}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="map"
                     style="background-image: url('https://www.135k.com/addons/sd_liferuning/tp/public/uploads/diy/map.png');background-repeat:no-repeat;background-size: cover">
                </div>
              </div>

              <!--templet3-->
              <div class="templet3" v-if="pageConfig.mainConfig.templetType == 3">
                <div class="map"
                     style="background-image: url('https://www.135k.com/addons/sd_liferuning/tp/public/uploads/diy/map.png');background-repeat:no-repeat;background-size: cover">
                  <div class="sys-notify">
                    <img class="notify-icon" v-bind:src="pageConfig.mainConfig.systemNotifyIconUrl">
                    <div class="notify-text">系统通知消息</div>
                  </div>
                </div>
                <div class="ingress-groups-wrap"
                     v-bind:style="{backgroundImage:'url('+pageConfig.mainConfig.ingressGroups.bgImage+')',color:pageConfig.mainConfig.ingressGroups.fontColor}"
                     style="background-repeat:no-repeat;background-size: 100% 100%;">
                  <div class="ingress-groups">
                    <div class="ingress-item" v-for="(ingressItem,index) in pageConfig.mainConfig.ingressGroups.ingress"
                         v-bind:style="{backgroundImage:'url('+ingressItem.iconUrl+')'}"
                         style="background-repeat:no-repeat;background-size: 100% 100%;">
                      <p class="ingress-name">
                        {{ingressItem.name}}
                      </p>
                      <p class="ingress-tip">
                        {{ingressItem.hint}}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!--<div class="app-content-nav" v-bind:class="{ 'active': appEditorConfig.currentEditor == 'nav'}"-->
            <!--@click="chooseAppView({viewName: 'nav'})">-->
            <!--<div class="app-content-nav-item">-->
            <!--<img class="app-content-nav-item-icon" src="images/notify.png">-->
            <!--<div class="app-content-nav-item-text">来包烟</div>-->
            <!--</div>-->
            <!--<div class="app-content-nav-item">-->
            <!--<img class="app-content-nav-item-icon" src="images/notify.png">-->
            <!--<div class="app-content-nav-item-text">来包烟</div>-->
            <!--</div>-->
            <!--<div class="app-content-nav-item">-->
            <!--<img class="app-content-nav-item-icon" src="images/notify.png">-->
            <!--<div class="app-content-nav-item-text">来包烟</div>-->
            <!--</div>-->
            <!--<div class="app-content-nav-item">-->
            <!--<img class="app-content-nav-item-icon" src="images/notify.png">-->
            <!--<div class="app-content-nav-item-text">来包烟</div>-->
            <!--</div>-->
            <!--</div>-->

          </div>
          <div class="app-footer"></div>
        </div>

        <!-- 编辑器 -->
        <div class="app-editor" v-bind:style="appEditorConfig.fixedPosition">
          <!-- APP HEAD -->
          <div v-if="appEditorConfig.currentEditor == 'head'">
            <div class="input-group">
              <div class="input-addo">
                页面名称
              </div>
              <div class="input-control">
                <input type="text" class="text-input" placeholder="页面名称"
                       v-model="pageConfig.titleConfig.pageTitle">
              </div>
            </div>
            <div class="input-group">
              <div class="input-addo">
                导航背景色
              </div>
              <div class="input-control">
                <input type="color" class="color-input" v-model="pageConfig.titleConfig.navigationBgColor">
                <button type="button" class="color-reset-btn" @click="navigationBgColorReset()">重置</button>
              </div>
            </div>

            <div class="input-group">
              <div class="input-addo">
                导航栏字体颜色
              </div>
              <div class="input-control">
                <el-radio v-model="pageConfig.titleConfig.fontColor" label="#FFFFFF" border size="mini">白</el-radio>
                <el-radio v-model="pageConfig.titleConfig.fontColor" label="#000000" border size="mini">黑</el-radio>
              </div>
            </div>
          </div>

          <!-- APP MAIN -->
          <div v-if="appEditorConfig.currentEditor == 'main'">

            <!-- 模板样式 -->
            <div class="input-group">
              <div class="input-addo">
                模板样式
              </div>
              <div class="input-control">
                <el-radio v-model="pageConfig.mainConfig.templetType" label="1" border size="mini">模板一</el-radio>
                <el-radio v-model="pageConfig.mainConfig.templetType" label="2" border size="mini">模板二</el-radio>
                <el-radio v-model="pageConfig.mainConfig.templetType" label="3" border size="mini">模板三</el-radio>
              </div>
            </div>

            <!-- 分割 -->
            <div class="dashed-break-up"></div>

            <!-- 头部背景图片 -->
            <div class="notify-editor-group" v-if="pageConfig.mainConfig.templetType == 2">
              <div class="input-addo">
                头部背景图片
              </div>
              <div class="banner-img">
                <img class="banner-img" v-bind:src="pageConfig.mainConfig.headBgImage">
              </div>
              <div class="input-control">
                <div class="input-item">
                  <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                         v-model="pageConfig.mainConfig.headBgImage">
                  <button type="button" class="input-choose-btn" data-toggle="modal" data-target="#exampleModalCenter"
                          @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.headBgImage'})">请选择
                  </button>
                </div>
              </div>
            </div>

            <!-- 分割 -->
            <div class="dashed-break-up"></div>

            <!-- 搜索框 -->
            <div class="input-group" v-if="pageConfig.mainConfig.templetType == 1">
              <div class="input-addo">
                搜索按钮背景颜色
              </div>
              <div class="input-control">
                <input type="color" class="color-input" v-model="pageConfig.mainConfig.searchConfig.searchBtnBgColor">
                <button type="button" class="color-reset-btn" @click="searchBtnBgColorReset()">重置</button>
              </div>
            </div>
            <div class="input-group" v-if="pageConfig.mainConfig.templetType == 1">
              <div class="input-addo">
                搜索按钮文字颜色
              </div>
              <div class="input-control">
                <input type="color" class="color-input" v-model="pageConfig.mainConfig.searchConfig.searchBtnFontColor">
                <button type="button" class="color-reset-btn" @click="searchBtnFontColorReset()">重置</button>
              </div>
            </div>
            <div class="input-group" v-if="pageConfig.mainConfig.templetType == 1">
              <div class="input-addo">
                搜索框提示
              </div>
              <div class="input-control">
                <input type="text" class="text-input" placeholder="输入搜索框提示文字"
                       v-model="pageConfig.mainConfig.searchConfig.searchHintText">
              </div>
            </div>

            <div class="input-group" v-if="pageConfig.mainConfig.templetType == 1">
              <div class="input-addo">
                下单按钮跳转链接
              </div>
              <div class="input-control">
                <select class="text-input" v-model="pageConfig.mainConfig.searchConfig.searchLinkedUrl">
                  <option value="">请选择</option>
                  <option :value="linkedItem.url" v-for="linkedItem in linkedArr">{{linkedItem.name}}</option>
                </select>
              </div>
            </div>

            <!-- 分割 -->
            <div class="dashed-break-up" v-if="pageConfig.mainConfig.templetType == 1"></div>

            <!-- 系统通知 -->
            <div class="notify-editor-group">
              <div class="input-addo">
                系统通知图标
              </div>
              <div class="banner-img">
                <img class="banner-img" v-bind:src="pageConfig.mainConfig.systemNotifyIconUrl">
              </div>
              <div class="input-control">
                <div class="input-item">
                  <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                         v-model="pageConfig.mainConfig.systemNotifyIconUrl">
                  <button type="button" class="input-choose-btn" data-toggle="modal" data-target="#exampleModalCenter"
                          @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.systemNotifyIconUrl'})">请选择
                  </button>
                </div>
              </div>
            </div>

            <!-- 分割 -->
            <div class="dashed-break-up"></div>

            <!-- 附近提示 -->
            <div class="input-group" v-if="pageConfig.mainConfig.templetType == 2">
              <div class="input-addo">
                附近背景颜色
              </div>
              <div class="input-control">
                <input type="color" class="color-input" v-model="pageConfig.mainConfig.nearbyConfig.bgColor">
                <button type="button" class="color-reset-btn" @click="nearbyBgColorReset()">重置</button>
              </div>
            </div>

            <div class="input-group" v-if="pageConfig.mainConfig.templetType == 2">
              <div class="input-addo">
                附近文字颜色
              </div>
              <div class="input-control">
                <input type="color" class="color-input" v-model="pageConfig.mainConfig.nearbyConfig.fontColor">
                <button type="button" class="color-reset-btn" @click="nearbyFontColorReset()">重置</button>
              </div>
            </div>

            <div class="input-group" v-if="pageConfig.mainConfig.templetType == 2">
              <div class="input-addo">
                附近文字提示
              </div>
              <div class="input-control">
                <input type="text" class="text-input" placeholder="输入搜索框显示文字"
                       v-model="pageConfig.mainConfig.nearbyConfig.hintText">
              </div>
            </div>

            <div class="notify-editor-group" v-if="pageConfig.mainConfig.templetType == 2">
              <div class="input-addo">
                附近图标
              </div>
              <div class="banner-img">
                <img class="banner-img" v-bind:src="pageConfig.mainConfig.nearbyConfig.iconUrl">
              </div>
              <div class="input-control">
                <div class="input-item">
                  <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                         v-model="pageConfig.mainConfig.nearbyConfig.iconUrl">
                  <button type="button" class="input-choose-btn" data-toggle="modal" data-target="#exampleModalCenter"
                          @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.nearbyConfig.iconUrl'})">请选择
                  </button>
                </div>
              </div>
            </div>

            <!-- 分割 -->
            <div class="dashed-break-up"></div>

            <!-- 轮播图 -->
            <div class="banner-editor-group" v-for="(bannerItem,index) in pageConfig.mainConfig.bannerGroups"
                 v-if="pageConfig.mainConfig.templetType == 1">
              <div class="banner-img">
                <img class="banner-img" v-bind:src="bannerItem.imageUrl">
              </div>
              <div class="banner-input-group">
                <div class="banner-input-item">
                  <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                         v-model="bannerItem.imageUrl">
                  <button type="button" class="input-choose-btn" data-toggle="modal" data-target="#exampleModalCenter"
                          @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.bannerGroups['+index+'].imageUrl'})">
                    请选择
                  </button>
                </div>
                <div class="banner-input-item">
                  <select class="select" v-model="bannerItem.type" @change="openTypeChange({current: bannerItem})">
                    <option value="">请选择</option>
                    <option :value="linkedItem.type" v-for="linkedItem in linkedArr">{{linkedItem.name}}</option>
                  </select>
                </div>

                <div class="banner-input-item" v-if="bannerItem.open_type == 'wxapp'">
                  <div class="appid-input">
                    <input type="text" v-model="bannerItem.linkedUrl" placeholder="请输入小程序ID">
                  </div>
                </div>
              </div>

              <span class="fa-li fa fa-remove remove-icon" title="删除"
                    @click="removeBannerItem({index:index})"></span>
            </div>

            <button class="btn btn-outline-secondary append-btn" @click="appendBannerItem()"
                    v-if="pageConfig.mainConfig.templetType == 1">添加轮播图片
            </button>

            <!-- 分割 -->
            <div class="dashed-break-up" v-if="pageConfig.mainConfig.templetType == 1"></div>

            <!-- 入口 -->
            <div class="input-group">
              <div class="input-addo">
                入口文字颜色
              </div>
              <div class="input-control">
                <input type="color" class="color-input" v-model="pageConfig.mainConfig.ingressGroups.fontColor">
                <button type="button" class="color-reset-btn" @click="ingressGroupsFontColorReset()">重置</button>
              </div>
            </div>
            <!--<div class="input-group">-->
            <!--<div class="input-addo">-->
            <!--入口文字选中颜色-->
            <!--</div>-->
            <!--<div class="input-control">-->
            <!--<input type="color" class="color-input"-->
            <!--v-model="pageConfig.mainConfig.ingressGroups.fontActiveColor">-->
            <!--<button class="color-reset-btn" @click="ingressGroupsFontActiveColorReset()">重置</button>-->
            <!--</div>-->
            <!--</div>-->
            <div class="input-group" v-if="pageConfig.mainConfig.templetType == 1">
              <div class="input-addo">
                边框颜色
              </div>
              <div class="input-control">
                <input type="color" class="color-input"
                       v-model="pageConfig.mainConfig.ingressGroups.borderColor">
                <button type="button" class="color-reset-btn" @click="ingressGroupsBorderColorReset()">重置</button>
              </div>
            </div>

            <div class="input-group" v-if="pageConfig.mainConfig.templetType == 1">
              <div class="input-addo">
                分列数量
              </div>
              <div class="input-control">
                <el-radio v-model="pageConfig.mainConfig.ingressGroups.columnSize" label="0" border size="mini">一行三列
                </el-radio>
                <el-radio v-model="pageConfig.mainConfig.ingressGroups.columnSize" label="1" border size="mini">一行四列
                </el-radio>
              </div>
            </div>

            <div class="notify-editor-group"
                 v-if="pageConfig.mainConfig.templetType == 2 || pageConfig.mainConfig.templetType == 3">
              <div class="input-addo">
                入口背景图片
              </div>
              <div class="banner-img">
                <img class="banner-img" v-bind:src="pageConfig.mainConfig.ingressGroups.bgImage">
              </div>
              <div class="input-control">
                <div class="input-item">
                  <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                         v-model="pageConfig.mainConfig.ingressGroups.bgImage">
                  <button type="button" class="input-choose-btn" data-toggle="modal" data-target="#exampleModalCenter"
                          @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.ingressGroups.bgImage'})">请选择
                  </button>
                </div>
              </div>
            </div>


            <div class="list-group" v-for="(ingressItem,index) in pageConfig.mainConfig.ingressGroups.ingress">
              <div class="list-group-item list-group-item-action active">
                <div class="ingress-input-group">
                  <div class="input-addo">
                    栏目名称
                  </div>
                  <div class="input-control">
                    <input type="text" class="text-input" placeholder="输入一级栏目名称"
                           v-model="ingressItem.name">
                  </div>
                </div>

                <div class="ingress-input-group" v-if="pageConfig.mainConfig.templetType == 3">
                  <div class="input-addo">
                    提示
                  </div>
                  <div class="input-control">
                    <input type="text" class="text-input" placeholder="输入一级栏目提示"
                           v-model="ingressItem.hint">
                  </div>
                </div>

                <div class="ingress-input-group"
                     v-if="pageConfig.mainConfig.templetType == 2 || pageConfig.mainConfig.templetType == 3">
                  <div class="input-addo">
                    跳转链接
                  </div>
                  <div class="input-control">
                    <select class="text-input" v-model="ingressItem.linkedUrl">
                      <option value="">请选择</option>
                      <option :value="linkedItem.url" v-for="linkedItem in linkedArr">{{linkedItem.name}}</option>
                    </select>
                  </div>
                </div>

                <div class="ingress-icon"
                     v-if="pageConfig.mainConfig.templetType == 2 || pageConfig.mainConfig.templetType == 3">
                  <div class="input-addo">
                    入口图标
                  </div>
                  <div class="icon-img">
                    <img class="icon-img" v-bind:src="ingressItem.iconUrl">
                  </div>
                  <div class="input-control">
                    <div class="input-item">
                      <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                             v-model="ingressItem.iconUrl">
                      <button type="button" class="input-choose-btn" data-toggle="modal"
                              data-target="#exampleModalCenter"
                              @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.ingressGroups.ingress['+index+'].iconUrl'})">
                        请选择
                      </button>
                    </div>
                  </div>
                </div>

                <!-- 标签设置 -->
                <div class="tag-group" v-if="pageConfig.mainConfig.templetType != 1">
                  <!-- 标签状态开关 -->
                  <div class="input-group">
                    <div class="input-addo">
                      开关标签
                    </div>
                    <div class="input-control">
                      <el-switch
                        v-model="ingressItem.tagGroup.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        inactive-value="0"
                        active-value="1"
                        size="mini">
                      </el-switch>
                    </div>
                  </div>
                  <!-- 标签添加 -->
                  <div class="ingress-input-group">
                    <div class="input-addo">
                      标签添加
                    </div>
                    <div class="input-control">
                      <input type="text" class="text-input" placeholder="输入需要的标签，用 Enter 键确认"
                             v-on:change="addTag({dataLinked: 'pageConfig.mainConfig.ingressGroups.ingress['+index+'].tagGroup.tags',event: $event})">
                    </div>
                  </div>
                  <!-- 标签集合 -->
                  <div class="ingress-input-group">
                    <div class="input-addo">
                      标签
                    </div>
                    <div class="input-control add-tags">
                      <div class="tags">
                        <div class="tags-item" v-for="(tagItem,tagIndex) in ingressItem.tagGroup.tags">
                          {{tagItem}} <i class="fa fa-remove"
                                         @click="removeTag({dataLinked: 'pageConfig.mainConfig.ingressGroups.ingress['+index+'].tagGroup.tags',index: tagIndex})"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
              <div class="list-group-item list-group-item-action"
                   v-for="(ingressChildrenItem,childrenIndex) in ingressItem.children"
                   v-if="pageConfig.mainConfig.templetType == 1">

                <div class="ingress-input-group-children">
                  <div class="ingress-img">
                    <img class="ingress-img" v-bind:src="ingressChildrenItem.iconUrl">
                  </div>
                  <div class="input-group">
                    <div class="input-item">
                      <input type="text" class="text-input" placeholder="输入二级栏目名称"
                             v-model="ingressChildrenItem.name">
                    </div>
                    <div class="input-item">
                      <input type="text" class="text-input" placeholder="输入或选择图片链接地址"
                             v-model="ingressChildrenItem.iconUrl">
                      <button type="button" class="input-choose-btn" data-toggle="modal"
                              data-target="#exampleModalCenter"
                              @click="openPhotoLibrary({dataLinked: 'pageConfig.mainConfig.ingressGroups.ingress['+index+'].children['+childrenIndex+'].iconUrl'})">
                        请选择
                      </button>
                    </div>
                  </div>
                </div>

                <div class="ingress-input-group">
                  <div class="input-addo">
                    跳转链接
                  </div>
                  <div class="input-control">
                    <select class="text-input" v-model="ingressChildrenItem.linkedUrl">
                      <option value="">请选择</option>
                      <option :value="linkedItem.url" v-for="linkedItem in linkedArr">{{linkedItem.name}}</option>
                    </select>
                  </div>
                </div>

                <!-- 标签状态开关 -->
                <div class="ingress-input-group">
                  <div class="input-addo">
                    开关标签
                  </div>
                  <div class="input-control">
                    <el-switch
                      v-model="ingressChildrenItem.tagGroup.status"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      inactive-value="0"
                      active-value="1"
                      size="mini">
                    </el-switch>
                  </div>
                </div>

                <!-- 标签添加 -->
                <div class="ingress-input-group">
                  <div class="input-addo">
                    标签添加
                  </div>
                  <div class="input-control">
                    <input type="text" class="text-input" placeholder="输入需要的标签，用 Enter 键确认"
                           v-on:change="addTag({dataLinked: 'pageConfig.mainConfig.ingressGroups.ingress['+index+'].children['+ childrenIndex +'].tagGroup.tags',event: $event})">
                  </div>
                </div>
                <!-- 标签集合 -->
                <div class="ingress-input-group">
                  <div class="input-addo">
                    标签
                  </div>
                  <div class="input-control add-tags">
                    <div class="tags">
                      <div class="tags-item" v-for="(tagItem,tagIndex) in ingressChildrenItem.tagGroup.tags">
                        {{tagItem}} <i class="fa fa-remove"
                                       @click="removeTag({dataLinked: 'pageConfig.mainConfig.ingressGroups.ingress['+index+'].children['+ childrenIndex +'].tagGroup.tags',index: tagIndex})"></i>
                      </div>
                    </div>
                  </div>
                </div>

                <span class="fa-li fa fa-remove remove-icon" title="删除二级入口"
                      @click="removeIngressChildrenItem({index: index,childrenIndex:childrenIndex})"></span>
              </div>

              <button class="btn btn-outline-info" @click="appendIngressChildrenItem({index: index})"
                      v-if="pageConfig.mainConfig.templetType == 1">添加二级入口
              </button>
              <span class="fa-li fa fa-remove remove-icon" title="删除一级入口"
                    @click="removeIngressItem({index: index})"></span>
            </div>
            <button type="button" class="btn btn-outline-secondary append-btn" @click="appendIngressItem()">添加入口
            </button>

            <!-- 分割 -->
            <div class="dashed-break-up" v-if="pageConfig.mainConfig.templetType == 1"></div>
          </div>

          <el-button type="success" size="small" class="display m-top submit-btn" @click="submitData()">立即保存</el-button>
        </div>


        <!-- 图片库 -->
        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered photo-library" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">{{photoLibrary.title}}</h5>
                <input type="hidden">
                <button type="button" class="btn btn-primary btn-sm image-upload-btn" data-toggle="modal"
                        data-target="#exampleModal"><i class="fa fa-cloud-upload"></i> 图片上传
                </button>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="image-groups">
                  <div class="image-item" v-for="photoItem in photoLibrary.photos">
                    <i class="fa-li fa fa-remove remove-icon image-item-icon"
                       @click="delPhoto({linked: photoItem})"></i>
                    <img v-bind:src="photoItem" title="图片" data-dismiss="modal" ref="choosePhoto"
                         @click="choosePhoto({linked: photoItem})">
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">
                  {{photoLibrary.returnBtnText}}
                </button>
                <!--<button type="button" class="btn btn-primary">Save changes</button>-->
              </div>
            </div>
          </div>
        </div>


        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">图片上传</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body file-upload-module">

                <div style="margin-bottom: 20px">
                  <h4>选择图片</h4>
                  <a id='addPic' class="btn btn-info btn-sm" href="" @click="addPic">添加图片 </a>
                  <input type="file" id="uploadFile" @change="onFileChange" multiple style="display: none;">
                </div>
                <div v-if="images.length >0">
                  <ul>
                    <li v-for="(image,key) in images">
                      <img :src="image" @click='delImage(key)'/>
                      <a href="#" style="position: absolute;" @click='delImage(key)'>
                        <span class="glyphicon glyphicon-remove"></span>
                      </a>
                    </li>
                  </ul>

                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-danger btn-sm" @click="removeImage">移除全部图片</button>
                <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" @click='uploadImage'>上传
                </button>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

  </el-container>
</template>
<script>
  export default {
    data() {
      return {
        loading: true,  // 页面加载
        name: 'index_template',  // 模板名称
        pageConfig: {    // 页面配置数据格式
          titleConfig: {
            pageTitle: "跑腿",    // 标题
            navigationBgColor: '#FFFFFF',   // 背景颜色
            fontColor: '#000000'    // 文字颜色
          },
          mainConfig: {
            templetType: '1',   // 模板类型 (1 => 模板一，2 => 模板二，3 => 模板三)
            headBgImage: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/index/module-style2/bg.png',   // 头部背景图片
            searchConfig: {
              searchBtnBgColor: '#20AD20',    // 搜索背景色
              searchBtnFontColor: '#FFFFFF',  // 搜索文本色
              searchHintText: '输入想买的商品，如：麦当劳嘻哈小食盒',   // 搜索提示文字
              searchLinkedUrl: '',   // 链接地址
            },
            bannerGroups: [
              {
                imageUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads//banner//201806/2018061938o90P15293937345821.jpg', // 图片地址
                linkedUrl: ''   // 链接地址
              }
            ],   // 轮播图
            systemNotifyIconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/icon/notify.png',    // 系统通知图标地址
            nearbyConfig: { // 附近人配置
              fontColor: '#333333',   // 文字颜色
              bgColor: '#FFFFFF', // 背景颜色
              hintText: '附近20位跑男',  // 提示文字
              iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/index/module-style2/icon2.png' // 图标
            },
            ingressGroups: {
              fontColor: '#333333',    // 文字颜色
              // fontActiveColor: '#20AD20',    // 文字颜色
              borderColor: '#DDDDDD',    // 边框颜色
              columnSize: '0',  // 每列数量(0 => 一行三列，1 => 一行四列)
              bgImage: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/index/module-style3/bg.png',    // 背景图片
              ingress: [   // 一级入口
                {
                  name: '帮我买', // 名称
                  hint: '随便买',   // 提示
                  iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/index/module-style3/ingress-bg1.png', // 图标地址
                  linkedUrl: '',   // 链接地址
                  tagGroup: { // 标签
                    status: 0,  // 状态0开启 1不开启
                    tags: [ // 标签
                      '买气球'
                    ]
                  },
                  children: [  // 二级入口
                    {
                      name: '来包烟', // 名称
                      iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads//service//201806/20180611BWdkEg15287115449473.png', // 图标地址
                      linkedUrl: '',   // 链接地址
                      tagGroup: { // 标签
                        status: 0,  // 状态0开启 1不开启
                        tags: [ // 标签
                          '买气球'
                        ]
                      },
                    },
                    {
                      name: '大药房', // 名称
                      iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads//service//201806/20180611rilv1o15287115551082.png', // 图标地址
                      linkedUrl: '',   // 链接地址
                      tagGroup: { // 标签
                        status: 0,  // 状态0开启 1不开启
                        tags: [ // 标签
                          '买气球'
                        ]
                      },
                    },
                    {
                      name: '便利店', // 名称
                      iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads//service//201806/20180611HIngEQ15287115640493.png', // 图标地址
                      linkedUrl: '',   // 链接地址
                      tagGroup: { // 标签
                        status: 0,  // 状态0开启 1不开启
                        tags: [ // 标签
                          '买气球'
                        ]
                      },
                    },
                    {
                      name: '买小吃', // 名称
                      iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads//service//201806/20180611feklaf15287115733304.png', // 图标地址
                      linkedUrl: '',   // 链接地址
                      tagGroup: { // 标签
                        status: 0,  // 状态0开启 1不开启
                        tags: [ // 标签
                          '买气球'
                        ]
                      },
                    }
                  ]
                },
                {
                  name: '帮我送', // 名称
                  hint: '随便买',   // 提示
                  iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/index/module-style3/ingress-bg2.png', // 图标地址
                  linkedUrl: '',   // 链接地址
                  tagGroup: { // 标签
                    status: 0,  // 状态0开启 1不开启
                    tags: [ // 标签
                      '买气球'
                    ]
                  },
                  children: [  // 二级入口
                    {
                      name: '来包烟', // 名称
                      iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads//service//201806/20180611BWdkEg15287115449473.png', // 图标地址
                      linkedUrl: '',   // 链接地址
                      tagGroup: { // 标签
                        status: 0,  // 状态0开启 1不开启
                        tags: [ // 标签
                          '买气球'
                        ]
                      },
                    },
                    {
                      name: '大药房', // 名称
                      iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads//service//201806/20180611rilv1o15287115551082.png', // 图标地址
                      linkedUrl: '',   // 链接地址
                      tagGroup: { // 标签
                        status: 0,  // 状态0开启 1不开启
                        tags: [ // 标签
                          '买气球'
                        ]
                      },
                    },
                    {
                      name: '便利店', // 名称
                      iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads//service//201806/20180611HIngEQ15287115640493.png', // 图标地址
                      linkedUrl: '',   // 链接地址
                      tagGroup: { // 标签
                        status: 0,  // 状态0开启 1不开启
                        tags: [ // 标签
                          '买气球'
                        ]
                      },
                    },
                    {
                      name: '买小吃', // 名称
                      iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads//service//201806/20180611feklaf15287115733304.png', // 图标地址
                      linkedUrl: '',   // 链接地址
                      tagGroup: { // 标签
                        status: 0,  // 状态0开启 1不开启
                        tags: [ // 标签
                          '买气球'
                        ]
                      },
                    }
                  ]
                },
                {
                  name: '帮排队', // 名称
                  hint: '随便买',   // 提示
                  iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads/background/resource/common/image/customer/index/module-style3/ingress-bg1.png', // 图标地址
                  linkedUrl: '',   // 链接地址
                  tagGroup: { // 标签
                    status: 0,  // 状态0开启 1不开启
                    tags: [ // 标签
                      '买气球'
                    ]
                  },
                  children: [  // 二级入口
                    {
                      name: '来包烟', // 名称
                      iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads//service//201806/20180611BWdkEg15287115449473.png', // 图标地址
                      linkedUrl: '',   // 链接地址
                      tagGroup: { // 标签
                        status: 0,  // 状态0开启 1不开启
                        tags: [ // 标签
                          '买气球'
                        ]
                      },
                    },
                    {
                      name: '大药房', // 名称
                      iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads//service//201806/20180611rilv1o15287115551082.png', // 图标地址
                      linkedUrl: '',   // 链接地址
                      tagGroup: { // 标签
                        status: 0,  // 状态0开启 1不开启
                        tags: [ // 标签
                          '买气球'
                        ]
                      },
                    },
                    {
                      name: '便利店', // 名称
                      iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads//service//201806/20180611HIngEQ15287115640493.png', // 图标地址
                      linkedUrl: '',   // 链接地址
                      tagGroup: { // 标签
                        status: 0,  // 状态0开启 1不开启
                        tags: [ // 标签
                          '买气球'
                        ]
                      },
                    },
                    {
                      name: '买小吃', // 名称
                      iconUrl: 'https://www.135k.com/addons/sd_liferuning/tp/public/uploads//service//201806/20180611feklaf15287115733304.png', // 图标地址
                      linkedUrl: '',   // 链接地址
                      tagGroup: { // 标签
                        status: 0,  // 状态0开启 1不开启
                        tags: [ // 标签
                          '买气球'
                        ]
                      },
                    }
                  ]
                }
              ]
            }
          }
        },
        appEditorConfig: {
          currentEditor: 'head',
          fixedPosition: {
            'top': '0px'
          }
        },
        windowAlert: {
          hintText: '',
          isShow: false,
          defaultTimeOut: 2000
        },
        photoLibrary: {
          title: '图片库',
          returnBtnText: '返回',
          dataUrl: '',
          photos: [
            // {
            //     title: '广播',
            //     photoUrl: 'images/notify.png'
            // },
            // {
            //     title: '轮播',
            //     photoUrl: 'images/banner.png'
            // }
          ]
        },
        linkedArr: [],  // 链接数组
        images: []  // 图片上传
      }
    },
    mounted: function () {
      let _this = this;

      // 默认数据加载
      this.api.getIndexTemplate().then(function (res) {
        if (res.code == 1) {
          _this.name = res.data.name;
          _this.pageConfig = res.data.value;
        }
        _this.loading = false;
      }).catch(function (res) {
        throw new Error(res);
      });

      // 链接加载
      this.api.getIndexLinkedUrl().then(function (res) {
        if (res.code == 1) {
          _this.linkedArr = res.data;
        }
      }).catch(function (res) {
        throw new Error(res);
      });

      // 图片加载
      _this.loadImageLibary();
    },
    methods: {
      /**
       * 加载图片库
       * */
      loadImageLibary: function () {
        let _this = this;
        this.api.getImageLibary().then(function (res) {
          if (res.code == 1) {
            // res.data 回传回来的JSON数组
            let arr = []; // 定义数组对象
            arr = res.data; // 自动将JSON数组转换为数组并且可以操作相关的API类库
            _this.photoLibrary.photos = arr;
          }
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      navigationBgColorReset: function () {   // 导航背景颜色重置
        let defaultColor = '#FFFFFF';
        this.pageConfig.titleConfig.navigationBgColor = defaultColor;
      },
      chooseAppView: function ({viewName}) {  // 切换编辑器显示状态
        const HEAD = 'head';
        const MAIN = 'main';
        const NAV = 'nav';
        if (viewName == HEAD) {
          this.appEditorConfig.currentEditor = HEAD;
          this.appEditorConfig.fixedPosition = {
            'top': '0px'
          }
        }

        if (viewName == MAIN) {
          this.appEditorConfig.currentEditor = MAIN;
          this.appEditorConfig.fixedPosition = {
            'top': '100px'
          }
        }

        if (viewName == NAV) {
          this.appEditorConfig.currentEditor = NAV;
          this.appEditorConfig.fixedPosition = {
            'top': '500px'
          }
        }

      },
      searchBtnBgColorReset: function () {    // 搜索背景颜色重置
        let defaultColor = '#20AD20';
        this.pageConfig.mainConfig.searchConfig.searchBtnBgColor = defaultColor;
      },
      searchBtnFontColorReset: function () {  // 搜索文字颜色重置
        let defaultColor = '#FFFFFF';
        this.pageConfig.mainConfig.searchConfig.searchBtnFontColor = defaultColor;
      },
      nearbyBgColorReset: function () {  // 附近背景重置
        let defaultColor = '#FFFFFF';
        this.pageConfig.mainConfig.nearbyConfig.bgColor = defaultColor;
      },
      nearbyFontColorReset: function () {  // 附近文字颜色重置
        let defaultColor = '#333333';
        this.pageConfig.mainConfig.nearbyConfig.fontColor = defaultColor;
      },
      appendBannerItem: function () { // 添加轮播
        this.pageConfig.mainConfig.bannerGroups.push({
          imageUrl: '', // 图片地址
          linkedUrl: '' ,  // 链接地址
          open_type:'' ,  // 打开类型
          type:'',  // 选择类型
        });
      },
      removeBannerItem: function ({index: index}) { // 删除轮播
        if (this.pageConfig.mainConfig.bannerGroups.length <= 1) {
          this.$message({
            showClose: true,
            message: '删除最少保留一个',
            type: 'warning'
          });
          return false;
        }
        this.removeItemByIndex({index: index, data: this.pageConfig.mainConfig.bannerGroups});
      },
      /**
       * 跳转类型更改
       */
      openTypeChange: function ({current: current}) {
        this.linkedArr.forEach(function (item, index) {
          if (item.type == current.type) {
            current.open_type = item.open_type;
            current.linkedUrl = item.url;
          }
        });
      },
      ingressGroupsFontColorReset: function () {   // 入口文字颜色重置
        let defaultColor = '#333333';
        this.pageConfig.mainConfig.ingressGroups.fontColor = defaultColor;
      },
      ingressGroupsFontActiveColorReset: function () {    // 入口文字选中颜色重置
        let defaultColor = '#20AD20';
        this.pageConfig.mainConfig.ingressGroups.fontActiveColor = defaultColor;
      },
      ingressGroupsBorderColorReset: function () {    // 入口边框颜色重置
        let defaultColor = '#DDDDDD';
        this.pageConfig.mainConfig.ingressGroups.borderColor = defaultColor;
      },
      appendIngressItem: function () {  // 添加一级菜单
        let ingress = {};
        this.$set(ingress, 'name', '');
        this.$set(ingress, 'hint', '');
        this.$set(ingress, 'iconUrl', '');
        this.$set(ingress, 'linkedUrl', '');
        this.$set(ingress, 'tagGroup', {
          status: 0,
          tags: []
        });
        this.$set(ingress, 'children', []);

        this.pageConfig.mainConfig.ingressGroups.ingress.push(ingress);
      },
      removeIngressItem: function ({index: index}) {  // 删除一级菜单
        if (this.pageConfig.mainConfig.ingressGroups.ingress.length <= 1) {
          this.$message({
            showClose: true,
            message: '删除最少保留一个',
            type: 'warning'
          });
          return false;
        }
        this.removeItemByIndex({index: index, data: this.pageConfig.mainConfig.ingressGroups.ingress});
      },
      appendIngressChildrenItem: function ({index: index}) {  // 添加二级菜单
        let ingress = {};
        this.$set(ingress, 'name', '');
        this.$set(ingress, 'iconUrl', '');
        this.$set(ingress, 'tagGroup', {
          status: 0,
          tags: []
        });
        this.pageConfig.mainConfig.ingressGroups.ingress[index].children.push(ingress);
      },
      removeIngressChildrenItem: function ({index: index, childrenIndex: childrenIndex}) {  // 删除二级菜单
        if (this.pageConfig.mainConfig.ingressGroups.ingress[index].children.length <= 1) {
          this.$message({
            showClose: true,
            message: '删除最少保留一个',
            type: 'warning'
          });
          return false;
        }
        this.removeItemByIndex({
          index: childrenIndex,
          data: this.pageConfig.mainConfig.ingressGroups.ingress[index].children
        });
      },
      removeItemByIndex: function ({index: index, data: data}) {  // 根据下标删除
        for (let i = index; i < data.length; i++) {
          if (i >= data.length - 1) {
            data.pop();
          } else {
            data[i] = data[i + 1];
          }
        }
      },
      addTag: function ({dataLinked: dataLinked, event: event}) {    // 标签添加
        if (eval('this.' + dataLinked).length > 6) {
          this.$message({
            showClose: true,
            message: '最多可以添加7个标签',
            type: 'warning'
          });
          return false;
        }
        eval('this.' + dataLinked + '.push("' + event.target.value + '")');
        event.target.value = '';
      },
      removeTag: function ({dataLinked: dataLinked, index: index}) {    // 删除标签
        let dataArr = eval('this.' + dataLinked);
        this.removeItemByIndex({index: index, data: dataArr})
      },
      choosePhoto: function ({linked: linked}) {  // 图片选择
        eval(this.photoLibrary.dataUrl + "='" + linked + "'");
      },
      delPhoto: function ({linked: linked}) { // 图片删除
        let _this = this;
        _this.api.delImageFromImageLibary({
          src: linked
        }).then(function (res) {
          if (res.code == 1) {
            _this.loadImageLibary();
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function (error) {
          throw new Error(error);
        });
      },
      openPhotoLibrary: function ({dataLinked: dataLinked}) {
        this.photoLibrary.dataUrl = 'this.' + dataLinked;
      },
      addPic(e) {
        e.preventDefault();
        $('#uploadFile').trigger('click');
        return false;
      },
      onFileChange(e) {
        let files = e.target.files;
        if (!files.length) return;
        this.createImage(files);
      },
      createImage(file) {
        if (typeof FileReader === 'undefined') {
          alert('您的浏览器不支持图片上传，请升级您的浏览器');
          return false;
        }
        let image = new Image();
        let vm = this;
        let leng = file.length;
        for (let i = 0; i < leng; i++) {
          let reader = new FileReader();
          reader.readAsDataURL(file[i]);
          reader.onload = function (e) {
            vm.images.push(e.target.result);
          };
        }
      },
      delImage: function (index) {
        this.images.shift(index);
      },
      removeImage: function (e) {
        this.images = [];
      },
      uploadImage: function () {
        let _this = this;
        this.api.uploadImageAlwaysImageLibary({
          images: _this.images
        }, "index").then(function (res) {
          if (res.code == 1) {
            let tempPhotos = _this.photoLibrary.photos.reverse();
            res.data.forEach(function (item, index) {
              tempPhotos.push(item);
            });
            tempPhotos.reverse();
            _this.removeImage();

            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      submitData: function () {
        let _this = this;
        _this.api.updateTemplate({
          name: _this.name,
          value: _this.pageConfig
        }).then(function (res) {
          if (res.code == 1) {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function (error) {
          throw new Error(error);
        });
      }
    }
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .container {
    width: 100%;
    margin: 0 15px;
  }

  .none {
    display: none;
  }

  a, input {
    outline: none;
  }

  ::-webkit-scrollbar {
    width: 0px; /*滚动条宽度*/
    height: 0px; /*滚动条高度*/
  }

  /* 系统弹窗 */
  .windowAlert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 99999;
    transition: all .5s ease 0s;
  }

  /* 图片库 */
  .photo-library {
    max-width: 1000px !important;
    max-height: 700px !important;
  }

  .photo-library .modal-body {
    max-height: 550px;
    height: 550px;
    overflow-y: auto;
  }

  .photo-library .image-groups {
    width: 100%;
  }

  .photo-library .image-item {
    display: block;
    width: 160px;
    height: 110px;
    background: #FFFFFF;
    border: 3px solid #f2f2f2;
    border-radius: 5px;
    float: left;
    margin: 10px;
  }

  .photo-library .image-item img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .image-upload-btn {
    margin-left: 780px;
  }

  /* 图片上传 */
  .file-upload-module {
    max-height: 550px;
    height: 550px;
    overflow: auto;
  }

  .file-upload-module ul {
    list-style-type: none;
  }

  .file-upload-module img {
    width: 150px;
    height: 150px;
    display: block;
    margin: 15px auto;
  }

  /* 图片删除 */
  .image-item {
    position: relative;
  }

  .photoItem {
    position: absolute;
    z-index: 99;
  }

  .image-item-icon {
    position: absolute;
    z-index: 999;
    left: 115px;
    top: 5px;
    /*display: block;*/
    background: red;
    border-radius: 999px;
    color: #ffffff;
  }

  /* 手机模型 */
  .app-preview {
    background: #FFF;
    width: 375px;
    height: 667px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin: 20px 0;
    padding: 15px;
    float: left;
    position: fixed;
    top: 100px;
  }

  /* 顶部 */
  .app-head {
    height: 44px;
    line-height: 44px;
    text-align: center;
    position: relative;
  }

  .app-head:before {
    content: "";
    position: absolute;
    top: 18px;
    left: 140px;
    height: 8px;
    width: 8px;
    background: #ddd;
    border-radius: 8px;
  }

  .app-head:after {
    content: "";
    position: absolute;
    top: 18px;
    left: 160px;
    height: 8px;
    width: 50px;
    background: #ddd;
    border-radius: 8px;
  }

  /* 内容 */
  .app-content {
    width: 100%;
    height: 550px;
    background: #FFF;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
  }

  .app-content > .active {
    border: 2px dashed green;
  }

  /*  内容顶部 */
  .app-content .app-content-title {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
  }

  /* 内容主要区域 */
  .app-content-main {
    height: 498px;
    overflow-y: auto;
  }

  /*----------------- 导航 ------------------ */
  .app-content-nav {
    height: 48px;
    line-height: 48px;
    display: flex;
    border-top: 1px solid #eee;
  }

  .app-content-nav-item {
    flex: 1;
  }

  .app-content-nav-item-icon {
    width: 20px;
    height: 20px;
    display: block;
    margin: 2px auto;
  }

  .app-content-nav-item-text {
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    text-align: center;
  }

  /*----------------- 导航 ------------------ */

  /* 底部 */
  .app-footer {
    height: 44px;
    line-height: 44px;
    text-align: center;
    position: relative;
  }

  .app-footer:before {
    content: "";
    position: absolute;
    top: 12px;
    left: 150px;
    height: 30px;
    width: 60px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }

  /* -------------------- 编辑工具 --------------------------- */
  .app-editor {
    border: 1px solid #ddd;
    width: 650px;
    min-height: 100px;
    float: left;
    margin: 50px 0 50px 400px;
    position: relative;
    border-radius: 10px;
    padding: 15px 15px 30px;
    transition: all .5s ease 0s;
  }

  .app-editor:before {
    position: absolute;
    content: "◆";
    top: 30px;
    left: -11px;
    display: block;
    width: 9px;
    height: 18px;
    font-size: 24px;
    color: rgb(255, 255, 255);
    z-index: 111;
  }

  .app-editor:after {
    position: absolute;
    content: "◆";
    top: 30px;
    left: -12px;
    color: rgb(221, 221, 221);
    z-index: 11;
    display: block;
    width: 9px;
    height: 18px;
    font-size: 24px;
  }

  /* 页面 */
  .app-editor .input-group {
    height: 30px;
    line-height: 30px;
    margin: 15px 0;
    font-size: 12px;
    color: #666;
  }

  .app-editor .input-group .input-addo {
    min-width: 100px;
    text-align: right;
    margin-right: 15px;
  }

  .app-editor .input-group .input-control {
    overflow: hidden;
  }

  .app-editor .input-group .text-input {
    height: 100%;
    width: 500px;
    padding: 0 5px;
    border: 1px solid #ddd;
    color: #666;
  }

  .app-editor .input-group .color-input {
    min-width: 405px;
    height: 100%;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
    padding: 3px;
  }

  .app-editor .input-group .color-reset-btn {
    height: 100%;
    line-height: 100%;
    padding: 0 35px;
    margin: 0;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
  }

  .app-editor .input-group .radio-input {
    width: 15px;
    height: 15px;
    position: relative;
    top: 3px;
  }

  .app-editor .input-group .radio-input-label {
    margin: 0 15px 0 3px;
  }

  .app-editor .dashed-break-up {
    width: 100%;
    border-bottom: 1px dashed #dddddd;
    margin: 0 0 15px;
  }

  /* 系统通知 */
  .app-editor .notify-editor-group {
    width: 615px;
    overflow: hidden;
    font-size: 12px;
    margin: 0 0 15px;
    border-radius: 5px;
    position: relative;
  }

  .app-editor .notify-editor-group .input-addo {
    float: left;
    min-width: 100px;
    text-align: right;
    margin-right: 15px;
    height: 60px;
    line-height: 60px;
    color: #666;
  }

  .app-editor .notify-editor-group .banner-img {
    height: 50px;
    width: 50px;
    float: left;
    margin: 3px 0;
  }

  .app-editor .notify-editor-group .input-control {
    float: left;
    margin-left: 15px;
  }

  .app-editor .notify-editor-group .input-item {
    height: 30px;
    line-height: 30px;
    margin: 15px 0;
  }

  .app-editor .notify-editor-group .text-input {
    width: 335px;
    float: left;
    height: 100%;
    line-height: 100%;
    border: 1px solid #ddd;
    padding: 0 5px;
    color: #666;
  }

  .app-editor .notify-editor-group .input-choose-btn {
    height: 100%;
    line-height: 100%;
    width: 100px;
    margin: 0;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
  }

  /* banner添加 */
  .app-editor .banner-editor-group {
    width: 615px;
    overflow: hidden;
    font-size: 12px;
    border: 1px solid #ddd;
    margin: 0 0 15px;
    border-radius: 5px;
    position: relative;
  }

  .app-editor .banner-editor-group .banner-img {
    height: 100px;
    width: 100px;
    float: left;
    margin: 1px;
  }

  .app-editor .banner-editor-group .banner-input-group {
    float: left;
    margin-left: 15px;
  }

  .app-editor .banner-editor-group .banner-input-item {
    height: 30px;
    line-height: 30px;
    margin: 15px 0;
  }

  .app-editor .appid-input {
    height: 30px;
    line-height: 30px;
  }

  .app-editor .appid-input input{
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    padding: 0 10px;
  }

  .app-editor .banner-editor-group .text-input {
    width: 390px;
    float: left;
    height: 100%;
    line-height: 100%;
    border: 1px solid #ddd;
    padding: 0 5px;
    color: #666;
  }

  .app-editor .banner-editor-group .input-choose-btn {
    height: 100%;
    line-height: 100%;
    width: 100px;
    margin: 0;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
  }

  .app-editor .banner-editor-group .select {
    width: 490px;
    float: left;
    height: 100%;
    line-height: 100%;
    border: 1px solid #ddd;
    padding: 0 5px;
    color: #666;
  }

  .app-editor .banner-editor-group .remove-icon {
    position: absolute;
    top: 3px;
    left: 588px;
    font-size: 12px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .6);
    color: #FFFFFF;
  }

  .app-editor .append-btn {
    width: 615px;
    height: 35px;
    line-height: 35px;
    font-size: 12px;
    padding: 0;
    margin: 0 0 15px;
    border-color: #dddddd;
  }

  /* 入口添加 */
  .list-group {
    margin: 0 0 15px;
    position: relative;
  }

  .list-group .ingress-input-group {
    width: 600px;
    margin: 15px 0;
    font-size: 12px;
    overflow: hidden;
  }

  .list-group .active {
    background: #F9FCEF;
    border: 1px solid rgba(0, 0, 0, .125);
  }

  .list-group .list-group-item {
    position: relative;
    color: #666;
  }

  .list-group .ingress-input-group .input-addo {
    min-width: 50px;
    text-align: right;
    margin-right: 15px;
    float: left;
    height: 30px;
    line-height: 30px;
  }

  .list-group .ingress-input-group .input-control {
    overflow: hidden;
    float: left;
  }

  .list-group .ingress-input-group .text-input {
    height: 30px;
    line-height: 30px;
    width: 510px;
    padding: 0 5px;
    color: #666;
  }

  .list-group .ingress-icon {
    width: 615px;
    overflow: hidden;
    font-size: 12px;
    border-radius: 5px;
  }

  .list-group .ingress-icon .input-addo {
    float: left;
    min-width: 50px;
    text-align: right;
    margin-right: 15px;
    height: 60px;
    line-height: 60px;
    color: #FFFFFF;
  }

  .list-group .ingress-icon .icon-img {
    height: 50px;
    width: 50px;
    float: left;
    margin: 3px 0;
  }

  .list-group .ingress-icon .input-control {
    float: left;
    margin-left: 15px;
  }

  .list-group .ingress-icon .input-item {
    height: 30px;
    line-height: 30px;
    margin: 15px 0;
  }

  .list-group .ingress-icon .text-input {
    width: 321px;
    float: left;
    height: 100%;
    line-height: 100%;
    border: 1px solid #ddd;
    padding: 0 5px;
    color: #666;
  }

  .list-group .ingress-input-group .radio-input, .list-group .ingress-input-group .radio-input-label {
    position: relative;
    top: 5px;
  }

  .list-group .ingress-input-group .radio-input-label {
    margin-right: 10px;
  }

  .list-group .ingress-icon .input-choose-btn {
    height: 100%;
    line-height: 100%;
    width: 100px;
    margin: 0;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
  }

  .list-group .ingress-input-group-children {
    width: 590px;
    overflow: hidden;
    font-size: 12px;
    border-radius: 5px;
  }

  .list-group .ingress-input-group-children .ingress-img {
    height: 100px;
    width: 100px;
    float: left;
    margin: 1px;
  }

  .list-group .ingress-input-group-children .input-group {
    float: left;
    margin-left: 15px;
    width: 455px;
  }

  .list-group .ingress-input-group-children .input-item {
    height: 30px;
    line-height: 30px;
    margin: 4px 0;
  }

  .list-group .ingress-input-group-children .text-input {
    width: 355px;
    float: left;
    height: 100%;
    line-height: 100%;
    border: 1px solid #ddd;
    padding: 0 5px;
    color: #666;
    background: #FFFFFF;
  }

  .list-group .ingress-input-group-children .input-item:first-child .text-input {
    width: 455px;
  }

  .list-group .ingress-input-group .radio-input, .list-group .ingress-input-group .radio-input-label {
    position: relative;
    top: 5px;
  }

  .list-group .ingress-input-group .radio-input-label {
    margin-right: 10px;
  }

  .list-group .ingress-input-group-children .input-choose-btn {
    height: 100%;
    line-height: 100%;
    width: 100px;
    margin: 0;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
  }

  .list-group .remove-icon {
    position: absolute;
    top: 4px;
    left: 592px;
    font-size: 12px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .6);
    color: #FFFFFF;
    z-index: 10;
  }

  .list-group select {
    background: #FFFFFF !important;
  }

  /* 标签添加 */
  .tag-group {
    overflow: hidden;
  }

  .tag-group .input-addo {
    min-width: 50px !important;
    width: auto;
    margin: 0;
  }

  .add-tags .tags {
    height: 20px;
    line-height: 20px;
    margin: 7px 0;
    overflow: hidden;
  }

  .add-tags .tags-item {
    background: green;
    color: #FFFFFF;
    border-radius: 2px;
    padding: 0 10px;
    margin: 0 5px;
    float: left;
  }

  .add-tags .tags-item .fa {
    margin: 0 2px;
  }

  .submit-btn{
    position: fixed;
    top: 180px;
    left: 1300px;
    height: 150px;
    font-size: 24px;
    width: 24px;
    white-space: pre-wrap;
    margin: 0;
    padding: 0 40px 0 20px;
    text-align: center;
  }

  /* -------------------- 编辑工具 --------------------------- */

  /*----------------- 样式一 ------------------ */
  .templet1 {
    font-size: 12px;
  }

  .templet1 .carousel-item-img {
    height: 200px;
    width: 100%;
    display: block;
    float: left;
  }

  /* 搜索*/
  .templet1 .seach-input {
    background: #FFFFFF;
    width: 310px;
    margin: 0 auto;
    padding: 5px;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
    top: -17px;
    box-shadow: 0 0 5px #666;
  }

  .templet1 .seach-icon {
    width: 20px;
    height: 20px;
    float: left;
    margin: 5px;
  }

  .templet1 .text-input {
    height: 30px;
    line-height: 30px;
    width: 200px;
    padding: 0 5px;
    float: left;
    border: none;
  }

  .templet1 .seach-btn {
    width: 70px;
    background: #20AD20;
    color: #FFF;
    border: none;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    margin: 0;
    padding: 0;
  }

  /* 系统通知 */
  .templet1 .sys-notify {
    background: #FFFFFF;
    width: 320px;
    margin: 0 auto;
    padding: 5px;
    overflow: hidden;
    border-radius: 5px;
  }

  .templet1 .notify-icon {
    width: 20px;
    height: 20px;
    float: left;
    margin: 5px;
    border-radius: 50px;
  }

  .templet1 .notify-text {
    height: 30px;
    line-height: 30px;
    width: 220px;
    padding: 0 5px;
    float: left;
    border: none;
  }

  /* 面板入口 */
  .templet1 .switch-panel {
    overflow: hidden;
    border-top: 5px solid #eee;
  }

  .templet1 .switch-panel-title {
    height: 40px;
    line-height: 40px;
    overflow: hidden;
  }

  .templet1 .panel-title-item {
    height: 40px;
    line-height: 40px;
    padding: 0 30px;
    float: left;
  }

  .templet1 .switch-panel-title .active {
    color: green;
    border-bottom: 1px solid green;
  }

  .templet1 .switch-panel-content {
    width: 100%;
  }

  .templet1 .panel-content-item {
    width: 100%;
    overflow: hidden;
  }

  .templet1 .ingress-item-col-3 {
    width: 88px;
    border: 1px solid #dddddd;
    padding: 5px;
    margin: 9px;
    float: left;
    overflow: hidden;
  }

  .templet1 .ingress-item-col-4 {
    width: 62px;
    border: 1px solid #dddddd;
    padding: 5px;
    margin: 9px;
    float: left;
    overflow: hidden;
  }

  .templet1 .ingress-icon {
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto;
  }

  .templet1 .ingress-text {
    text-align: center;
    height: 25px;
    line-height: 25px;
  }

  /*----------------- 样式一 ------------------ */

  /*----------------- 样式二 ------------------ */
  .templet2 {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .templet2 .head {
    width: 100%;
    height: 200px;
  }

  .templet2 .location-hint {
    color: #FFFFFF;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }

  .templet2 .nearby-hint-text {
    background: #FFFFFF;
    width: 150px;
    text-align: center;
    border-radius: 50px;
    font-size: 12px;
    padding: 5px 0;
    line-height: 20px;
    margin: 15px auto;
  }

  .templet2 .nearby-hint-text img {
    width: 20px;
    height: 20px;
    position: relative;
    top: -1px;
    left: -5px;
  }

  .templet2 .ingress-groups-wrap {
    width: 95%;
    height: 100px;
    background: #FFFFFF;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 10px;
  }

  .templet2 .ingress-groups {
    overflow-x: auto;
  }

  .templet2 .ingress-item {
    width: 95px;
    height: 100px;
    display: inline-block;
    margin: 0 5px;
    text-align: center;
  }

  .templet2 .ingress-icon {
    width: 50px;
    height: 50px;
    margin: 15px auto 5px;
    display: block;
    background: #f2f2f2;
    border-radius: 50px;
    outline: none;
    border: none !important;
  }

  .templet2 .ingress-name {
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    margin: 0;
    padding: 0;
  }

  .templet2 .map {
    width: 100%;
    height: 293px;
  }

  /*----------------- 样式二 ------------------ */

  /*----------------- 样式三 ------------------ */
  .templet3 {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .templet3 .map {
    width: 100%;
    height: 293px;
  }

  /* 系统通知 */
  .templet3 .sys-notify {
    background: #FFFFFF;
    width: 320px;
    margin: 0 auto;
    padding: 0 5px;
    overflow: hidden;
    border-radius: 100px;
    position: relative;
    top: 255px;
  }

  .templet3 .notify-icon {
    width: 20px;
    height: 20px;
    float: left;
    margin: 5px;
    border-radius: 50px;
  }

  .templet3 .notify-text {
    height: 30px;
    line-height: 30px;
    width: 220px;
    padding: 0 5px;
    float: left;
    border: none;
  }

  .templet3 .ingress-groups-wrap {
    width: 100%;
    height: 200px;
    background: #FFFFFF;
    overflow: hidden;
  }

  .templet3 .ingress-groups {
    overflow-x: auto;
  }

  .templet3 .ingress-item {
    width: 150px;
    height: 80px;
    display: inline-block;
    margin: 10px 9px;
    background: #FFFFFF;
    border-radius: 5px;
    overflow: hidden;
  }

  .templet3 .ingress-name {
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    margin: 10px 20px;
    padding: 0;
  }

  .templet3 .ingress-tip {
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    margin: 12px 20px;
    padding: 0;
  }

  /*----------------- 样式三 ------------------ */
</style>
